<template>
  <div class="father">
    <h2>这是父组件</h2>
    <p>{{ father }}</p>

    <p>计时{{ num }}</p>
    <button @click="a1">改变自己的值</button>
    <button @click="a2">改变子组件的值</button>
    <Son/>
  </div>
</template>

<script>
import Son from "@/views/Son";
import {mapState} from "vuex";

export default {
  name: "Father",
  data() {
    return {}

  },
  components: {
    Son
  },
  computed: {
    ...mapState(["father", 'num'])
  },
  created() {
    this.$store.commit("changFather", {father: Number(localStorage.getItem("father"))})
  },
  methods: {
    a1() {
      this.$store.commit("changFather", {father: 100})
    },
    a2() {
      this.$store.commit("changeSon", {son: "1231"})
    },
  },

  beforeUpdate() {
    if (this.num < 60) {
      localStorage.setItem("father", this.father)
    }else {
      localStorage.clear()
      localStorage.setItem("father", 23)
      localStorage.setItem("time", 1)
    }
  }
}
</script>

<style scoped lang="less">
.father {
  text-align: center;
  height: 400px;
  background-color: aquamarine;
}
</style>